<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue $nextTick() 示例</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>  
</head>  
<body>  
  <div id="app">  
    <p>{{ message }}</p>  
    <button @click="updateMessage">更新消息</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello, Vue!'  
      },  
      methods: {  
        updateMessage() {  
          // 更新数据  
          this.message = 'Message has been updated!';  
  
          // 使用 $nextTick() 确保 DOM 已经更新  
          this.$nextTick(() => {  
            // 在这里，DOM 已经被更新，可以安全地操作它  
            console.log('DOM 已经更新，新消息是:', this.$el.querySelector('p').textContent);  
  
            // 例如，我们可以添加一个新的样式到更新的段落  
            this.$el.querySelector('p').style.color = 'red';  
          });  
        }  
      }  
    });  
  </script>  
</body>  
</html>